<template>
	<view class="my-content">
		<view class="shadow overflow-hidden rounded-16" v-for="(item,index) in listData" style="margin-bottom: 10rpx;">
			<div class="between " >
				<div class=" text-center center text-white fz24 pt-24 pb-24 w-40"
					:class="{'bg-green':item.status==1,'bg-yellow':item.status==2,'bg-orange':item.status==3,'bg-red':item.status==4}"
					style="align-self: stretch;">
					电桩{{statusText[item.status]}}
				</div>
				<div class="rounded-full w-100 h-100 flex-shirnk-0 bg-green center overflow-hidden">
					<image :src="item.pic" class="w-full h-full" mode="aspectFill"></image>
				</div>
				<div class="info fz24 text-gray-900" style="width: 450rpx;word-break: break-all;">
					<div class="fz28 text-black">{{item.name}}
					<text v-if="item.brand">({{item.brand}})</text>
					</div>
					<div class="between mt-5">
						<div class="">编号:{{item.sn}}</div>
						<div class="" v-if="item.rate">功率:{{item.rate}}kw</div>
					</div>
					<div class="between mt-5">
						<div class="">
							<text decode="decode">营业时间:{{ item.start_time }}-{{ item.end_time }} <block v-if="item.start_time2"> |{{ item.start_time2 }}-{{ item.end_time2 }} </block><block v-if="item.start_time3">|{{ item.start_time3 }}-{{ item.end_time3 }} </block></text>
						</div>					
					</div>
					<div class="between mt-5">
						<div class="">停车费:{{item.price}}元/小时</div>
						<div class="text-green-2" style="display: none;">可约停车位</div>
					</div>
				</div>
				<div class="status  text-white fz28 font-bold mt-15 mr-15 p-5 rounded-15 w-40 h-40 center flex-shirnk-0"
					style="align-self: flex-start;"
					:class="{'bg-orange':item.speed=='慢','bg-red':item.speed=='快'}"
					>
					{{item.speed}}
					
				</div>
			</div>
			<view class="res-b" v-if="item.status==1" @click="use_device(item.id)">使用此电桩</view>
			<view class="res-b yellow-b" v-if="item.status==3" @click="complete_device(item.id)">使用完毕</view>
		</view>
		
		<view class="record" @click="gotoRecord">
			<image src="../../static/my/icon8.png" mode="widthFix"></image>
			<text>记录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusText: {
					1: "正常",
					2: "故障",
					3: "被占用 ",
					4: "停用",
				},
				formData: {
					shuxing:'self',
					// 车辆id
					car_id: '',
					// 电桩id(预约停车可不传)
					device_id: '',
					// 请求用户id
					member_id: uni.getStorageSync("id"),
					// 预约类型(1:预约充电 2:预约停车)
					type: '1'
				},
				listData:[]
			}
		},
		onLoad:function(option) {
			this.getInfo()
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			async getInfo() {
				const res = await this.http("get", "/api/master/my_device")
				this.listData = res.data
			},
			gotoRecord(){
				uni.navigateTo({
					url:'/pages/my/recordList'
				})
			},
			async use_device(id){
				this.formData.device_id = id
				const res = await this.http("post", '/api/order/create_order', this.formData)
				this.toast(res.message)
				if(res.code==200){
					setTimeout(function(){
						uni.navigateTo({
							url:'/pages/my/recordList'
						})
					},2000)
				}
			},
			async complete_device(id){
				this.formData.device_id = id
				var that = this
				const res = await this.http("post", '/api/order/complete_order', this.formData)
				if(res.code==200){
					uni.showToast({
						title:'操作成功'
					})
					setTimeout(function(){
						uni.redirectTo({
							url:'/pages/my/recordList?do=1'
						})
					},2000)
				}else{
					uni.showModal({
						'content':'此电桩已被其他人占用'
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.record{
		position: fixed;
		right: 10upx;
		top: 50%;
		width: 68upx;
		height: 88upx;
		border-radius: 16upx;
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-flow: column;
		image{
			width: 48upx;
			height: auto;
		}
		text{
			font-size: 24upx;
			color: #FF8F1F;
		}
	}
	.my-content{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		.res-box{
			width: 100%;
			border-radius: 16upx;
			overflow: hidden;
			box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
			margin-bottom: 20upx;
			position: relative;
			.jiao{
				position: absolute;
				top: 10upx;
				right: 10upx;
				width: 40upx;
				height: 40upx;
				border-radius: 8upx;
				background: #FA5151;
				color: #fff;
				font-size: 24upx;
				text-align: center;
				line-height: 40upx;
			}
			.res-top{
				width: 100%;
				display: flex;
				.res-top-l{
					width: 40upx;
					background-color: #00B578;
					font-size: 24upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					padding: 10upx 0;
				}
				.yellow{
					background-color: #FFC300 !important;
				}
				.res-top-c{
					display: flex;
					align-items: center;
					width: 90%;
					padding: 10upx;
					box-sizing: border-box;
					.res-img{
						width: 100upx;
						height: 100upx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 10upx;
						image{
							width: 100%;
							height: auto;
						}
					}
					.res-text{
						.res-flex{
							display: flex;
							text{
								min-width: 200upx;
								margin-right: 40upx;
							}
						}
						.res-title{
							font-size: 28upx;
							color: #000;
						}
						text{
							display: block;
							font-size: 24upx;
							color: #9E9E9E;
						}
					}
				}
			}
			
		}
	}
	
	.res-b{
		font-size: 36upx;
		color: #3662EC;
		padding: 10upx 0;
		text-align: center;
		border-top: 1px solid #D8D8D8;
	}
	.yellow-b{
		color: #FFC300 !important;
	}
</style>